import { useState } from 'preact/hooks'; // 从 preact/hooks 中导入 useState 钩子


/**
 * GreetingProps 接口定义了组件的属性类型
 * @interface GreetingProps
 * @property {string[]} messages - 欢迎语数组，用于组件显示和随机选择
 */
interface GreetingProps {
  messages: string[];
}

/**
 * Greeting 组件，用于显示随机欢迎语
 * @param {Array} messages - 欢迎语数组 
 * @returns {JSX.Element} - 返回一个包含欢迎语和按钮的 JSX 元素
 */
export default function Greeting({ messages }: GreetingProps) {

  /**
   * 从消息数组中随机选择一条消息
   * @returns {string} 返回随机选择的一条消息
   */
  const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];

  // 使用 useState 钩子管理欢迎语状态，初始值为 messages 数组的第一个元素
  const [greeting, setGreeting] = useState(messages[0]);

  return (
    <div>
      {/* 显示当前欢迎语 */}
      <h3>{greeting}！感谢来访！</h3>
      <button onClick={() => setGreeting(randomMessage())}>
        新的欢迎语
      </button>
    </div>
  );
}